<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="css/base.css" rel="stylesheet">
    <link href="css/head.css" rel="stylesheet">
    <link href="css/kind.css" rel="stylesheet">

</head>

<body>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/Utils.js"></script>
    <script src="js/head.js"></script>
    <script src="js/upload.js"></script>

    <script src="js/mock.js"></script>
    <script src="js/mock/kind.js"></script>

    <div class="head"></div>

    <div class="main">
        <div class="uploadBox" style="width: 150px;height:150px;margin:auto;">
            <div class="image" style="width: 150px;height:150px;position:relative">
                <div class="shade"
                    style="background-color: rgb(0, 0, 0,0.5); position: absolute; top:0;width: 100%;height: 100%;border-radius: 50%;color:white;display:flex;justify-content: center;align-items: center;">
                    点击上传图片
                </div>
            </div>
        </div>
    
        <div style="width:50%;margin:auto;;margin-top:20px;text-align: center;display: flex; justify-content: space-between;align-items: center;">
            <span>宠物类型:</span>
            <input type="text" style="width: 80%" id="type">
        </div>
        <div class="button" id="add" style="margin:auto;margin-top:20px;width: 50%;">添加</div>
    
    
    </div>

    <script>
        let imgUrl = null


        $('document').ready(function () {
            $('.uploadBox .image').append(`
                    <img  style="width:100%;height:100%;border-radius: 50%;">
                `)

            $('.shade').hide()

            $('.uploadBox').hover(function () {

                $('.shade').show()
            }, function () {
                $('.shade').hide()

            })


            uploadImgEvent()
            addEvent()
        })

        function addEvent(){
            $('#add').click(function(){
                let type = $('#type').val()

                if(!imgUrl){
                    alert("请上传图片")
                    return
                }

                else if(type == ""){
                    alert("请填写类型名字")
                    return
                }

                let data = {
                    type,
                    image:imgUrl
                }

                data = JSON.stringify(data)

                $.ajax({
                    data,
                    url:baseUrl + 'add_type.php',
                    type: 'POST',
                    success:function(res){
                        if(typeof(res) == 'string')
                            res = JSON.parse(res)

                        if(res.code == 200){
                            alert(res.msg)
                            location.href="kind_manage.html"
                        }

                        else
                            alert(res.msg)
                    }
                })
            })
        }
                    
        function uploadImgEvent(){
                $('.uploadBox #upload').change(function(event){
                    let file = event.target.files[0]

                    let formData = new FormData()

                    formData.append('file', file)

                    let upload = $.ajax({
                        data: formData,
                        url:baseUrl + 'upload.php',
                        type: 'POST',
                        contentType: false,
                        processData : false
                    })

                    upload.then(res => {
                        if(typeof(res) == 'string')
                            res = JSON.parse(res)

                        if(res.code == 200){
                            imgUrl = res.data.imgUrl

                            $('.uploadBox .image img').attr('src',baseUrl + imgUrl)

                        }else
                            alert(res.msg)

                    })
                })
            }
    </script>

</body>

</html>